<template>
  <el-dialog
    title="批量修改群名称"
    :visible.sync="$attrs.visable"
    width="770px"
    :before-close="handleClose"
    append-to-body
  >
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      size="small"
      label-width="90px"
      label-position="left"
      class="p-20"
    >
      <el-form-item label="修改方式" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">统一修改</el-radio>
          <el-radio :label="2">关键词替换</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="form.type == 1">
        <el-form-item label="群名称" prop="groupname">
          <div class="flexbetween bg_f9">
            <div class="flex f-12">
              <div v-for="(item,index) in tagList" :key="index" class="tagbg bg_fff mr-5" @click="handleTag(item)">{{item.name}}</div>
            </div>
            <div class="flex">
              <div class="mr-16">
                编号从
                <el-input
                  v-model="form.no"
                  size="mini"
                  placeholder=""
                  style="width: 60px; margin: 0 5px"
                />
                开始
              </div>
              <span class="c_primary commhover" @click="handleCopy">复制</span>
            </div>
          </div>
          <el-input
            v-model="form.groupname"
            type="textarea"
            rows="10"
            placeholder="输入新群名，限48字"
            maxlength="48"
            id="messageInput"
          >
            <template v-slot:default="scope">
              <span v-html="highlightText(scope.data)"></span>
            </template>
          </el-input>
          <div class="inputfooter c_text3 f-12">
            变量间若需要分隔符请自己设置；在现有群名基础上增加信息，可先选择“当前群名”然后添加其他属性
          </div>
        </el-form-item>
        <el-form-item label="" prop="">
          <div class="c_text3 line_h_20">举例：</div>
          <div class="c_text3 line_h_20">当前群名为“学习棒棒”，统一修改为：当前群名 - 数学 - 编号班</div>
          <div class="c_text3 line_h_20">修改后：学习棒棒-数学11班、学习棒棒-数学12班…</div>
        </el-form-item>
      </div>
      <div v-if="form.type == 2">
        <el-form-item label="关键词：" prop="keyword">
          <el-input
            v-model="form.keyword"
            placeholder="输入群备注中包含的关键词，限20字"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="替换为：" prop="replace">
          <el-input
            v-model="form.replace"
            placeholder="输入内容，限20字"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="" prop="">
          <div class="c_text3 line_h_20">举例：</div>
          <div class="c_text3 line_h_20">当前备注为“学习棒棒-20级数学班”，将 “数学班” 替换为 “语文班”</div>
          <div class="c_text3 line_h_20">修改后：“学习棒棒-20级语文班”</div>
          <div class="mt-20 c_text3 line_h_20">注意：若备注中不包含设置的关键词，将不进行修改</div>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      form: {
        type: 1,
        groupname: "",
      },
      rules: {
        groupname: [
          { required: true, message: "请输入群名称", trigger: "blur" },
        ],
        receive: [
          { required: true, message: "请选择接收企微号", trigger: "change" },
        ],
      },
      tagList:[{name:'当前群名',value:'{{当前群名}}'},{name:'编号',value:'{{编号}}'}],
      optionsList: [
        { label: "满足任意一个标签", value: 1 },
        { label: "同时满足所有标签", value: 2 },
        { label: "未打标签", value: 3 },
      ],
      options: [],
    };
  },
  props: {
    type: {
      default: 1, // 1 转让群主  2 设置群管
    },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleTag(item) {
      var elInput=document.getElementById("messageInput");
      var startPos=elInput.selectionStart;
      var endPos=elInput.selectionEnd;
      var text=elInput.value;
      if(startPos ===undefined ||endPos ===undefined){
        return;
      }
      var result=text.substring(0,startPos) + item.value + text.substring(endPos);
      //重新定义光标位置
      elInput.focus();
      elInput.selectionStart=startPos+item.value.length;
      elInput.selectionEnd=startPos +item.value.length;
      elInput.value=result;
      this.form.groupname=result;
    //   this.form.groupname = this.form.groupname + '{{' + item + '}}'
    },

    highlightText(text){
      console.log('text:', text)
      // 假设我们要标记的词是 "样式"
      const keyword = '{{当前群名}}';
      const regex = new RegExp(keyword, 'g');
      return text.replace(regex, `<span class="commtag maintag">${keyword}</span>`);
    },

    handleCopy(){
      this.copy(this.form.groupname)
    },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.tagbox {
  background-color: #f7f7f7;
  border-radius: 2px;
}
.checkbox {
  padding: 2px 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f0;
}
.el-form {
  ::v-deep .el-textarea__inner {
    border-radius: 0;
    border-color: #e9e9e9;
  }
}
.bg_f9 {
  background-color: #f9f9f9;
  padding: 8px 18px;
  border: 1px solid #e9e9e9;
  border-bottom: 0;
}
.tagbg {
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  color: #666;
  padding: 3px 8px;
  line-height: 20px;
}
.inputfooter {
  border: 1px solid #e9e9e9;
  border-top: none;
  height: 28px;
  line-height: 28px;
  padding-left: 8px;
}
</style>